<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="../../webjar/bootstrap/3.3.7-1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../webjar/bootstrap-table/bootstrap-table.css">
    <link rel="stylesheet" href="../../webjar/css/mystyle.css">

    <script src="../../webjar/jquery/3.1.1/jquery.min.js"></script>
    <script src="../../webjar/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>

    <script src="../../webjar/bootstrap-table/bootstrap-table.js"></script>
    <script src="../../webjar/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

    <script src="../../webjar/layer/layer.js"></script>
    <script src="../../webjar/plugins/layui/layui.js"></script>
    <script src="../Public/ServerPath.js"></script>
    <script src="../Public/ibcpLayer.js"></script>
    <script src="../Public/Sign.js"></script>
    <script src="../Public/cookie_util.js"></script>
    <script src="EventStatus.js"></script>
    <title>Events Status</title>

    <style type="text/css">
        html{
            height: 100%;
        }
        body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #upDiv,#underDiv{
            margin: 0;
            padding: 5px;
        }
        td, th {text-align: center;}
        .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>td, .table>thead>tr>th {vertical-align: middle;}
        .text-muted{color: #fff;}
        .desc{font-size:1.2em;font-weight: 600;padding: 2em 0 1em;position: relative;line-height: 1.2}
        .desc:after{
            content: '';
            position: absolute;
            width: 20em;
            height: 2px;
            background-color: #d5d6e2;
            left: calc(100% / 2 - 10em);
            bottom: 0;
        }
    </style>
    <!--[if IE]>
    <!--<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>-->
    <![endif]-->
</head>

<body style="padding: 10px">
    <!--Event Current Status表-->
    <div id="upDiv" class="panel panel-default" style="margin: 5px">

        <div class="panel-heading" style="height: 35px">
            <div style="padding-bottom: 10px">
                <div class="col-sm-3" style="padding-left: 0px">
                    <h3><span class="label label-custom">Event Current Value 表</span></h3>
                </div>
                <div class="col-sm-9"  style="padding-right: 0px">
                    <button type="button" id="bStatus" style="width: 25%;display: inline;background-color: #6ce26c "><span class="label label-custom">点击查看事件当前值</span></button>
                </div>
            </div>
            <br/>
        </div>

        <div style="margin-top: 10px" >
            <table id="status" class="bootstrap-table table"
                   data-toggle="table"
                   data-click-to-select="true"
                   data-striped="true"
                   data-row-style="rowStyle"
                   data-cell-style="cellStyle"  style="padding-top: 10px;overflow-y: scroll">
                <thead>
                <tr>
                    <th data-field="tagName">TagName</th>
                    <th data-field="previousStatus">PreviousValue</th>
                    <th data-field="currentStatus">CurrentValue</th>
                </tr>
                </thead>
            </table>
        </div>

    </div>

    <div id="underDiv" style="width:100%;padding: 0px">
        <!--Code列表-->
        <div class="col-xs-6" style="margin:0;padding:0;height: 60%">
            <div id="left" class="panel panel-default" style="height: 100%">
            <div class="panel-heading" style="height: 35px">
                <div style="padding-bottom: 10px">
                    <div class="col-sm-3" style="padding-left: 0px">
                        <h3><span class="label label-custom">Code列表</span></h3>
                    </div>
                    <div class="col-sm-4"  style="padding-right: 0px">
                        <button type="button" id="bCode" style="width: 50%;display: inline;background-color: #6ce26c"><span class="label label-custom">点击加载Code</span></button>
                    </div>
                    <div class="col-sm-4"  style="padding-right: 0px">
                        <button type="button" id="bStop" style="width: 50%;display: inline;background-color: #6ce26c"><span class="label label-custom">停止加载Code</span></button>
                    </div>
                </div>
            </div>
                <div style="margin-top: 10px">
                    <table id="code" class="bootstrap-table table"
                           data-toggle="table"
                           data-click-to-select="true"
                           data-striped="true"
                           data-row-style="rowStyle"
                           data-cell-style="cellStyle"  style="padding-top: 10px;overflow-y: scroll">
                        <thead>
                        <tr>
                            <th data-field="eventType" >EventType</th>
                            <th data-field="name">Name</th>
                            <th data-field="code">Code</th>
                            <th data-field="parent">Parent</th>
                            <th data-field="status">CurrentStatus</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <!--Event History Status 表-->
        <div class="col-xs-6" style="margin:0;padding:0;height: 60%">
            <div id="right" class="panel panel-default" style="height: 100%">
            <div class="panel-heading" style="height: 35px;">
                <h3><span class="label label-custom">Event History 表</span></h3>
            </div>
                <div style="margin-top: 10px">
                    <table id="history" class="bootstrap-table table"
                           data-toggle="table"
                           data-click-to-select="true"
                           data-striped="true"
                           data-row-style="rowStyle"
                           data-cell-style="cellStyle"
                           data-sort-name="startTime"
                           data-sort-order="desc"
                           style="padding-top: 10px;overflow-y: scroll">
                        <thead>
                        <tr>
                            <th data-field="id" >ID</th>
                            <th data-field="startTime">开始时间</th>
                            <th data-field="endTime">结束时间</th>
                        </tr>
                        </thead>
                    </table>
                </div>
        </div>
        </div>

    </div>
</body>
</html>